<script setup>
import { ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const list = ref([
  {
    id: 'A001',
    name: '3D激光测风雷达',
    lat: '114.31236143°',
    lon: '22.601349°'
  },
  {
    id: 'A002',
    name: '低空综合气象观测仪',
    lat: '114.31236143°',
    lon: '22.601349°'
  },
  {
    id: 'A003',
    name: '垂直激光测风雷达',
    lat: '114.31236143°',
    lon: '22.601349°'
  },
  {
    id: 'A004',
    name: '大气电场仪',
    lat: '114.31236143°',
    lon: '22.601349°'
  }
])
</script>
<template>
  <div class="table">
    <ul class="thead">
      <li>序号</li>
      <li>设备名称</li>
      <li>经度</li>
      <li>维度</li>
    </ul>
    <ul class="tbody">
      <vue3-seamless-scroll
        :list="list"
        :step="0.3"
        :hover="true"
        :isRemUnit="true"
        :wheel="true"
        :delay="3"
        :limitScrollNum="5"
      >
        <li v-for="(item, index) in list" :key="index">
          <p>
            {{ item.id }}
          </p>
          <p>
            <el-tooltip effect="dark" :content="item.name" placement="top">
              <span class="name">{{ item.name }}</span>
            </el-tooltip>
          </p>
          <p>
            {{ item.lat }}
          </p>
          <p>
            {{ item.lon }}
          </p>
        </li>
      </vue3-seamless-scroll>
    </ul>
  </div>
</template>
<style scoped lang="scss">
.table {
  width: 100%;
  padding: 0 10px;
  margin-top: 10px;
  .thead {
    width: 100%;
    height: 37px;
    display: flex;
    background: url('@img/infrastructure/table_header_bg.png');
    background-size: 100% 100%;

    li {
      flex: 1;
      line-height: 37px;
      text-align: center;
    }
  }

  .tbody {
    height: 150px;
    overflow-y: auto;

    li {
      display: flex;
      height: 37px;
      line-height: 37px;
      border-bottom: 1px solid #0f496c;

      &:nth-child(odd) {
        background-color: rgba(15, 73, 108, 0.3);
      }

      p {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .riseLandPointType {
          width: 67px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background: rgba(0, 213, 255, 0.25);
          border-radius: 2px;
          border: 1px solid #00d5ff;
        }

        .name {
          width: 80px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
